<template>
  <div class="">
    <!-- <x-header class="header" :left-options="{backText: ''}">宽带安装</x-header> -->
    <div class="pad" style="font-size:0.8em;">
      <!-- <div class="msg">已选择<span class="product">“大王卡”</span></div> -->
      <div class="msg">根据国家实名制要求，请准确提供身份证信息</div>
      <group title="" label-width="5.5em" label-margin-right="2em">
        <x-input title="姓名" placeholder="输入联系人姓名" v-model="fname" :is-type="personName" required></x-input>
        <x-input title="身份证号" placeholder="输入身份证号" v-model="unumber" :is-type="personNumber" required></x-input>
        <x-input title="联系电话" placeholder="联系人手机号码" mask="999 9999 9999" v-model="fmobile" :max="13" is-type="china-mobile" required></x-input>
        <br/>
        <divider>请选择号码</divider>
        <popup-picker title="所在地区" :data="addresslist" v-model="city" @on-change="onCityChange" placeholder="请选择盟市" value-text-align="left" show-name></popup-picker>

        <x-input title="选择号码" placeholder="" v-model="selmobile" :max="13" readonly required @click.native="showDialog"></x-input>
      </group>
      <div style="padding:15px;">
        <check-icon :value.sync="agree" type="plain">
          <span style="font-size:0.85em;">我已阅读并同意《客户入网服务协议及业务协议》</span>
        </check-icon>
        <br/>
        <br/>
        <x-button @click.native="onSubmit" :gradients="['#82C2E6', '#7CA700']" v-if="!loading">立即提交</x-button>
        <x-button type="primary" v-else disabled>提交中...</x-button>
      </div>
    </div>
    <div>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">可选号码</p>
        <div class="img-box" style="height:300px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <ul>
            <li v-for="(x,i) in mobilePool" :key="i" @click="onSelect(x)">{{x}}</li>
          </ul>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  XInput,
  Divider,
  XNumber,
  XButton,
  PopupPicker,
  XDialog,
  CheckIcon
} from "vux";
import map from "lodash/map";

export default {
  data() {
    return {
      addresslist: [],
      city: [],
      cityCode: null,
      fmobile: "",
      fname: "",
      unumber: "",
      selmobile: "",
      showScrollBox: false,
      agree: true,
      mobilePool: [],
      loading: false
    };
  },
  mounted() {
    this.$store.dispatch("cities").then(resp => {
      let items = resp.data.items;
      items.forEach(x => {
        x.value = x.code;
      });
      let arr = [];
      arr.push(items);
      this.addresslist = arr;
    });
  },
  methods: {
    onSubmit() {
      if (
        this.fmobile == "" ||
        this.fname == "" ||
        this.fnumber == "" ||
        this.selmobile == ""
      ) {
        this.showwarn("请填写必要信息");
        return;
      }

      this.loading = true;
      this.$store
        .dispatch("orderAdd", {
          fmobile: this.fmobile.replace(/ /g, ""),
          cityCode: this.cityCode,
          fname: this.fname,
          unumber: this.unumber,
          selmobile: this.selmobile
        })
        .then(resp => {
          this.loading = false;
          let ret = resp.data;
          if (ret.errCode != "0") {
            alert(ret.message);
            return;
          }
          this.$router.push({ name: "Result" });
        });
    },
    personName(value) {
      return {
        valid: /(^([\u4E00-\uFA29]|[\uE7C7-\uE7F3])*$)/.test(value),
        msg: "姓名格式错误"
      };
    },
    personNumber(value) {
      return {
        valid: /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(value),
        msg: "身份证号格式错误"
      };
    },
    onCityChange(value) {
      this.cityCode = value[0];
    },
    onSelect(item) {
      console.log(item);
      this.selmobile = item;
      this.showScrollBox = false;
      this.$store
        .dispatch("numberUsed", { number: this.selmobile })
        .then(resp => {
          if (resp.data.errCode != "0") {
            alert("此号码已被占用，请重新选择");
          }
        });
    },
    showDialog() {
      if (!this.cityCode) {
        this.showwarn("请选择盟市");
        return;
      }
      this.showScrollBox = true;
      this.$store
        .dispatch("numberPool", { cityCode: this.cityCode })
        .then(resp => {
          this.mobilePool = map(resp.data.items, "code");
        });
    },
    showwarn(text) {
      this.$vux.toast.show({
        type: "warn",
        text: text
      });
    }
  },
  components: {
    XHeader,
    Group,
    XInput,
    Divider,
    XNumber,
    XButton,
    PopupPicker,
    XDialog,
    CheckIcon
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "~vux/src/styles/close";

.msg {
  line-height: 2.25em;
  padding-left: 0.8em;
  font-size: 1.15em;

  .product {
    color: #dba95e;
  }
}
.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
    li {
      list-style: none;
      float: left;
      width: 130px;
      margin-top: 8px;
    }
  }
  .vux-close {
    // margin-top: 8px;
    // margin-bottom: 8px;
  }
}
</style>
